<template>
	<view class="home">

		<view class="popup">
			<view class="label">
				<button open-type="chooseAvatar" @chooseavatar="chooseavatar">
					<view class="css">
						<view class="tit">
							头像
						</view>
						<view class="img">
							<image :src="avatarUrl" mode=""></image>
						</view>
					</view>
				</button>
			</view>
			<view class="label">
				<view class="tit">
					昵称
				</view>
				<view class="input">
					<input id="nickname-input" v-model="nickname" class="authorization white" type="nickname"
						placeholder="请输入用户昵称">
				</view>
			</view>
			<view class="label">
				<view class="tit">
					手机号
				</view>
				<view class="input">
					<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
						<input v-model="mobile" placeholder="请输入手机号">
					</button>
				</view>
			</view>
			<view class="button" @click="GetUserInfo();">
				修改
			</view>
			<view class="h">

			</view>
			<view class="tits">
				修改账户
			</view>
			<view class="label">
				<view class="tit">
					邮箱
				</view>
				<view class="input">
					<input v-model="username" placeholder="请输入邮箱">
				</view>
			</view>

			<view class="label">
				<view class="tit">
					验证码
				</view>
				<view class="input">
					<input v-model="code" placeholder="请输入验证码">
				</view>
				<view class="code">
					<view class="btn" v-show="show" @click="getCode">获取验证码</view>
					<view class="wait" v-show="!show">{{count}}</view>
				</view>
			</view>
			<view class="button" @click="UpdateUsername();">
				修改账号
			</view>
			<view class="h">

			</view>
		</view>

	</view>
</template>

<script>
	import {
		request
	} from "@/request/index.js"
	import regeneratorRuntime from '@/lib/runtime/runtime'
	import {
		login
	} from "@/utils/asyncWx.js"
	export default {
		data() {
			return {
				img: "",
				user: {},
				code: "",
				show: true,
				count: "",
				username: "",
				avatarUrl:"",
				mobile:"",
				nickname:"",

			}
		},
		onLoad() {
			this.initUserInfo()
		},

		methods: {

			// 修改账号
			async UpdateUsername() {
				if (this.username == '') {
					layer.msg('邮箱不能为空')
					return
				}
				if (this.code == "") {
					layer.msg('验证码不能为空')
					return
				}
				let data = {
					username: this.username,
					code: this.code,
				}

				var res = await request({
					url: "UpdateUsername",
					data
				})
				if (res.code == 0) {
					uni.showToast({
						title: res.msg,
					})
					uni.removeStorageSync('token');
					uni.navigateTo({
						url: "/pages/login/login"
					})
				} else {
					uni.showToast({
						title: res.msg,
					})
				}

			},

			// 验证码
			async getCode() {
				if (this.username == '') {
					uni.showToast({
						title: res.msg,
					})
					return
				}

				let url = 'sendSms?name=' + this.nickname + '&email=' + this.username;

				var res = await request({
					url: url,
				})

				uni.showToast({
					title: res.msg,
				})

				const TIME_COUNT = 60
				if (!this.timer) {
					this.count = TIME_COUNT
					this.show = false
					this.timer = setInterval(() => {
						if (this.count > 0 && this.count <= TIME_COUNT) {
							this.count--
						} else {
							this.show = true
							clearInterval(this.timer)
							this.timer = null
						}
					}, 1000)
				}
			},
			// 获取用户信息
			async initUserInfo() {

				var res = await request({
					url: "GetUserInfo"
				})
				console.log(res);
				if (res.code == 0) {

					this.user = res.data
					this.username = res.data.username
					this.avatarUrl = res.data.avatarUrl
					this.mobile = res.data.mobile
					this.nickname = res.data.nickname
				}

			},

			// 获取手机号
			async getPhoneNumber(e) {
				let res = await request({
					url: 'GetPhone',
					data: {
						code: e.detail.code
					}
				})
				if (res.code == 0) {
					this.tel = res.data
				}
			},

			GetOpen() {
				this.toggle();
				// this.GetWxInfo()
			},
			toggle() {

				this.$refs['popup'].open();
			},
			change(e) {

			},
			async GetUserInfo() {

				let that = this
				uni.createSelectorQuery().in(this).select("#nickname-input").fields({
					properties: ["value"],
				}).exec((res) => {
					console.log(res[0]);
					that.nickname = res[0].value;
					this.deuser()
				})

			},
			async deuser() {
				uni.showLoading({
					title: '加载中'
				});
				let that = this
				var data = {};
				data.mobile = that.mobile
				data.avatarUrl = that.avatarUrl
				data.nickname = that.nickname
				var res = await request({
					url: 'UpdateMember',
					data
				})

				if (res.code == 0) {
					uni.hideLoading()
					uni.switchTab({
						url: "/pages/index/index"
					})
				} else {
					uni.hideLoading()
					uni.showToast({
						title: res.msg
					})
				}
			},
			chooseavatar(e) {
				this.img = e.detail.avatarUrl
				uni.uploadFile({
					url: this.lmurl + 'UploadImg',
					filePath: this.img,
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (res) => {
						let res1 = JSON.parse(res.data)
						this.avatarUrl = res1.data.path
					}
				});

			},

		}
	}
</script>

<style>
	.init {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-top: 60rpx;
	}

	.init image {
		width: 300rpx;
		height: 300rpx;
		margin: 0 auto;
	}

	.init .bb {
		margin: 60rpx auto;
		padding: 0 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 15rpx;
		text-align: center;
		background-color: #0DC06E;
		margin-bottom: 0;
		font-size: 28rpx;
		color: #ffffff;
	}

	button::after {
		border: none;
		background-color: none;
	}

	button {

		margin-left: auto;
		margin-right: auto;
		padding-left: 0rpx;
		padding-right: 0rpx;
		box-sizing: border-box;

		text-align: left;
		text-decoration: none;
		font-size: 28rpx;
		line-height: 1.35;

		color: #000000;
		background-color: #fff;

	}

	.popup {
		width: 100%;
		height: 500rrpx;

		/* padding: 5%; */
		padding-top: 30rpx;
		background-color: #fff;


	}

	.h {
		width: 100%;
		height: 20rpx;
		margin-top: 35px;
		background-color: #F3F3F3;
	}

	.popup .tt {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 32rpx;
		font-weight: 700;
		margin-bottom: 20rpx;
	}

	.tits {
		margin-top: 20rpx;
		margin-left: 20rpx;
		font-weight: 700;
		font-size: 32rpx;
	}

	.popup .label {
		width: 100%;
		display: flex;
		height: 100rpx;
		align-items: center;
		position: relative;
		border-bottom: 2rpx solid #eee;
	}

	.popup .label .code {
		position: absolute;
		right: 20rpx;
		z-index: 4;
	}

	.popup .label button {
		width: 100% !important;
		height: 80rpx !important;

	}

	.popup .label button .css {

		display: flex !important;
		align-items: center !important;
		position: relative;
	}

	.popup .label .tit {
		width: 16% !important;
		font-size: 28rpx;
		margin-right: 10rpx;
		text-align: center;
	}

	.popup .label .img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.input {
		width: 100%;
		height: 80rpx;
	}

	.popup .label .img image {
		width: 80rpx;
		height: 80rpx;
	}

	.popup .label input {
		width: 100%;
		height: 100%;
		background-color: #fff;

	}

	.popup .zuo {
		width: 14rpx;
		height: 25rpx;
		position: absolute;
		right: 0;
	}

	.popup .button {
		margin: 60rpx auto;
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 15rpx;
		text-align: center;
		background-color: #0DC06E;
		margin-bottom: 0;
		color: #ffffff;
	}
</style>